<template>
  <div class="app-container">
    <el-form :inline="true" size="small" label-width="100">
      <el-form-item>
        <el-button class="btn-add" @click="handleUpsert" size="small"> 添加</el-button>
      </el-form-item>
    </el-form>
    <div class="table-container">
      <el-table ref="menuTable" height="100%" style="width: 100%" :data="list" row-key="id" v-loading="listLoading" border>
        <el-table-column label="编号" width="80" align="center">
          <template #default="scope">{{ scope.row.id }}</template>
        </el-table-column>
        <el-table-column label="菜单名称" min-width="120" align="center">
          <template #default="scope">{{ scope.row.title }}</template>
        </el-table-column>
        <el-table-column label="前端名称" min-width="100" align="center">
          <template #default="scope">{{ scope.row.name }}</template>
        </el-table-column>
        <el-table-column label="菜单图标" width="100" align="center">
          <template #default="scope">
            <svg-icon :icon-class="scope.row.icon"></svg-icon>
          </template>
        </el-table-column>
        <el-table-column label="禁用状态" width="90" align="center">
          <template #default="scope">
            <el-switch
              size="small"
              :active-value="0"
              :inactive-value="1"
              v-model="scope.row.hidden"
              @change="handleHiddenChange(scope.row)"
            >
            </el-switch>
          </template>
        </el-table-column>
        <el-table-column label="排序" width="100" align="center">
          <template #default="scope">{{ scope.row.sort }}</template>
        </el-table-column>
        <el-table-column label="操作" width="200" align="center">
          <template #default="scope">
            <el-button type="primary" size="small" link @click="handleUpsert(scope.row)"> 编辑 </el-button>
            <el-button type="danger" size="small" link @click="handleDelete(scope.row)"> 删除 </el-button>
          </template>
        </el-table-column>
      </el-table>
    </div>
  </div>
  <Upsert ref="upsertRef" @refresh="getList" />
</template>

<script setup lang="ts">
import { fetchTreeList, deleteMenu, updateHidden } from '@/api/menu'
import { ElMessage, ElMessageBox } from 'element-plus'
import { ref } from 'vue'
import type { Menu, MenuTree } from '@/models/menu'
import Upsert from './components/upsert.vue'

defineOptions({ name: 'MenuList' })

const list = ref<MenuTree[]>([])
const listLoading = ref(true)
const upsertRef = ref<InstanceType<typeof Upsert>>()

async function getList() {
  listLoading.value = true
  try {
    const res = await fetchTreeList()
    list.value = res.data.data
  } finally {
    listLoading.value = false
  }
}

async function handleHiddenChange(row: Menu) {
  await updateHidden(row.id as number, { hidden: row.hidden || 0 })
  ElMessage.success('修改成功！')
}

function handleUpsert(row?: Menu) {
  upsertRef.value?.show(row?.id)
}

async function handleDelete(row: Menu) {
  await ElMessageBox.confirm('是否要删除该菜单', '提示', { type: 'warning' })
  await deleteMenu(row.id as number)
  ElMessage.success('删除成功！')
  getList()
}

getList()
</script>

<style scoped></style>
